<template>
  <div style="margin: 10px">
    <h2>安装st论坛</h2>
    <blockquote class="layui-elem-quote">st论坛，一个卓越的bbs系统，由FCSQ技术部牵头开发。
      <br>开源地址：https://gitee.com/fcsq-security-team2/st-forum<br>
      <a href="https://jq.qq.com/?_wv=1027&k=WRHln7cY">点击加入 【ST论坛开发交流群】</a> <br>
      QQ群号：1029518771
    </blockquote>
    <form class="layui-form layui-form-pane" action=" ">
      <div class="layui-form-item">
        <label class="layui-form-label">网站标题</label>
        <div class="layui-input-block">
          <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                 class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">网站简介</label>
        <div class="layui-input-block">
          <input type="text" name="description" required lay-verify="required" placeholder="一个卓越的bbs系统"
                 autocomplete="off"
                 class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">启动端口</label>
        <div class="layui-input-inline">
          <input type="text" name="port" required lay-verify="required" placeholder="请输入端口" autocomplete="off"
                 class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">网站上线的端口，例如：80（只能输入数字）</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">后台端口</label>
        <div class="layui-input-inline">
          <input type="text" name="adminport" required lay-verify="required" placeholder="请输入后台端口" autocomplete="off"
                 class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">管理端上线的端口，例如：3000（只能输入数字）</div>
      </div>
      <hr>
      <h3>数据库设置</h3>
      <div class="layui-form-item">
        <label class="layui-form-label">数据库类型</label>
        <div class="layui-input-inline">
          <input type="text" name="database" required lay-verify="required" placeholder="请输入数据库类型" autocomplete="off"
                 class="layui-input" v-model="DataBaseType">
        </div>
        <div class="layui-form-mid layui-word-aux">仅支持sqlite3或mysql</div>
      </div>
      <div class="layui-form-item" v-if="DataBaseType==='mysql'">
        <label class="layui-form-label">mysql地址</label>
        <div class="layui-input-block">
          <input type="text" name="mysqlhost" required lay-verify="required" placeholder="例如：127.0.0.1"
                 autocomplete="off"
                 class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" v-if="DataBaseType==='mysql'">
        <label class="layui-form-label">mysql端口</label>
        <div class="layui-input-block">
          <input type="text" name="mysqlport" required lay-verify="required" placeholder="例如：3306，只能填写数字"
                 autocomplete="off"
                 class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" v-if="DataBaseType==='mysql'">
        <label class="layui-form-label">mysql库名</label>
        <div class="layui-input-block">
          <input type="text" name="mysqldbname" required lay-verify="required" placeholder="例如：stdb"
                 autocomplete="off"
                 class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" v-if="DataBaseType==='mysql'">
        <label class="layui-form-label">mysql用户名</label>
        <div class="layui-input-block">
          <input type="text" name="mysqlusername" required lay-verify="required" placeholder="请输入用户名"
                 autocomplete="off"
                 class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" v-if="DataBaseType==='mysql'">
        <label class="layui-form-label">mysql密码</label>
        <div class="layui-input-block">
          <input type="password" name="mysqlpassword" required lay-verify="required" placeholder="请输入密码"
                 autocomplete="off"
                 class="layui-input">
        </div>
      </div>
      <div v-if="DataBaseType!=='mysql' && DataBaseType!=='sqlite3'">
        <h3 class="layui-font-red">不支持的数据库类型！</h3>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="installForm">安装</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      DataBaseType: ""
    }
  },
  mounted() {
    window.layer.alert("如果您继续操作。将视为同意st论坛的相关协议<br>st论坛开源地址：https://gitee.com/fcsq-security-team2/st-forum<br>【ST论坛开发交流群】：https://jq.qq.com/?_wv=1027&k=WRHln7cY", {
      title: "提示",
      shadeClose: true,
    })
    let that = this;
    window.layui.use('form', function () {
      var form = window.layui.form;
      //监听提交
      form.on('submit(installForm)', function (data) {
        if (that.DataBaseType !== "mysql" && that.DataBaseType !== "sqlite3") {
          window.layer.msg("不支持的数据库类型！", {icon: 2})
          return false;
        }
        var index = window.layer.load()
        window.layui.$.post("/api/install", {"json": JSON.stringify(data.field)}, function (data, status) {
          console.log(status)
          window.layer.close(index)
          if (data.msg === "ok") {
            window.layer.alert("恭喜您，安装成功。请重启应用，享受您的st论坛之旅吧", {title: "安装成功", icon: 1})
          } else {
            window.layer.alert(data.err, {title: "安装失败", icon: 2})
          }
        })
        return false;
      });
    });
  }
}
</script>
